<template>
  <div>
    <w-table
      :data="emps"
      :columns="columns"
      :is-paging="true"
      :paging="paging"
      row-key="EmpId"
      @load="load"
    >
      <template slot="empBase" slot-scope="e">
        <div class="userInfo">
          <div class="head">
            <img
              v-if="e.row.UserHead == null || e.row.UserHead == ''"
              src="/image/defhead.png"
              width="50"
              height="50"
            >
            <el-avatar
              v-else
              shape="square"
              :size="50"
              :src="e.row.UserHead | imageUri"
            />
          </div>
          <div class="content">
            <div class="item">
              <i
                v-if="e.row.Sex == 1"
                style="color: #409eff"
                class="el-icon-male"
              />
              <i
                v-else-if="e.row.Sex == 2"
                style="color: #f56c6c"
                class="el-icon-female"
              />
              <el-link @click="showEmp(e.row.EmpId)">{{ e.row.EmpName }}</el-link>
            </div>
            <div class="empNo">{{ e.row.EmpNo }}</div>
          </div>
        </div>
      </template>
      <template slot="UserType" slot-scope="e">
        <span>{{ HrUserType[e.row.UserType].text }}</span>
      </template>
      <template slot="action" slot-scope="e">
        <el-button type="danger" icon="el-icon-delete" @click="drop(e.row)" />
      </template>
      <template slot="empTitle" slot-scope="e">
        <span v-if="e.row.DeptTitle">{{ e.row.DeptTitle }}</span>
        <el-tooltip
          v-if="e.row.Title && e.row.Title.length > 0"
          effect="dark"
          placement="bottom"
        >
          <div slot="content">
            <p v-for="(t, index) in e.row.Title" :key="index">{{ t.Show }}</p>
          </div>
          <i class="el-icon-more" />
        </el-tooltip>
      </template>
    </w-table>
    <empModel
      :id="empId"
      :visible="empVisible"
      @close="empVisible=false"
    />
  </div>
</template>

<script>
import { HrItemDic, HrUserType } from '@/config/publicDic'
import empModel from './empModel.vue'
export default {
  components: {
    empModel
  },
  props: {
    empList: {
      type: Array,
      default: null
    },
    total: {
      type: Number,
      default: 0
    },
    remove: {
      type: Function,
      default: null
    }
  },
  data() {
    return {
      HrUserType,
      HrItemDic,
      empVisible: false,
      empId: null,
      emps: [],
      columns: [
        {
          key: 'EmpNo',
          title: '人员信息',
          align: 'left',
          width: 250,
          fixed: 'left',
          slotName: 'empBase',
          sortable: 'custom'
        },
        {
          key: 'Dept',
          title: '部门',
          align: 'center'
        },
        {
          key: 'Phone',
          title: '手机号',
          align: 'center'
        },
        {
          key: 'Post',
          title: '岗位',
          align: 'center'
        },
        {
          key: 'DeptTitle',
          title: '职务',
          align: 'center',
          slotName: 'empTitle'
        },
        {
          key: 'UserType',
          title: '人员类型',
          align: 'center',
          slotName: 'UserType'
        },
        {
          key: 'Action',
          title: '操作',
          align: 'center',
          slotName: 'action'
        }
      ],
      paging: {
        Size: 20,
        Index: 1,
        SortName: 'EmpId',
        IsDesc: false,
        Total: 0
      },
      curEmp: [],
      isload: false,
      curKey: null
    }
  },
  watch: {
    empList: {
      handler(val) {
        if (val) {
          this.emps = val
        }
      },
      immediate: true
    },
    total: {
      handler(val) {
        this.paging.Total = val
      },
      immediate: true
    }
  },
  methods: {
    showEmp(empId) {
      this.empId = empId
      this.empVisible = true
    },
    load() {
      this.$emit('load', this.paging)
    },
    drop(row) {
      const title = '确认删除 ' + row.EmpName + '?'
      const that = this
      this.$confirm(title, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.submitDrop(row.Id)
      })
    },
    async submitDrop(id) {
      await this.remove(id)
      this.$message({
        type: 'success',
        message: '删除成功!'
      })
      this.load()
    }
  }
}
</script>
  <style type="less" scoped>
.choiceEmp {
  width: 100%;
}
.userInfo {
  width: 250px;
  height: 60px;
}
.userInfo .head {
  width: 50px;
  float: left;
  height: 60px;
  text-align: center;
}
.userInfo .content {
  width: 180px;
  float: left;
  text-align: left;
}
.userInfo .content .item {
  text-indent: 5px;
  margin: 0;
  font-size: 16px;
  text-overflow: ellipsis;
  width: 100%;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
}

.userInfo .content .empNo {
  padding-left: 10px;
  margin: 0;
  color: #82848a;
  font-size: 12px;
  text-overflow: ellipsis;
  width: 100%;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
}
.userInfo .content i {
  font-weight: 600;
}
</style>
